<template>
  <el-dialog v-model="dialogVisible" title="权限模块管理" width="700px" destroy-on-close>
    <div class="module-manager">
      <div class="toolbar">
        <el-button type="primary" :icon="CirclePlus" @click="handleAdd">新增模块</el-button>
      </div>

      <el-table :data="moduleList" row-key="FId" border>
        <el-table-column prop="FName" label="模块名称" width="180" />
        <el-table-column prop="FCode" label="模块编码" width="180" />
        <el-table-column prop="FDescription" label="模块描述" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="danger" @click="handleDelete(row.FId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 模块编辑弹窗 -->
    <el-dialog v-model="editDialogVisible" :title="`${editMode === 'add' ? '新增' : '编辑'}模块`" width="500px" append-to-body>
      <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="80px">
        <el-form-item label="模块名称" prop="FName">
          <el-input v-model="editForm.FName" placeholder="请输入模块名称" />
        </el-form-item>
        <el-form-item label="模块编码" prop="FCode">
          <el-input v-model="editForm.FCode" placeholder="请输入模块编码" />
        </el-form-item>
        <el-form-item label="排序号" prop="FOrderNum">
          <el-input-number v-model="editForm.FOrderNum" :min="0" />
        </el-form-item>
        <el-form-item label="模块描述" prop="FDescription">
          <el-input v-model="editForm.FDescription" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">确定</el-button>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { CirclePlus } from "@element-plus/icons-vue";
import {
  getPermissionModules,
  createPermissionModule,
  updatePermissionModule,
  deletePermissionModule
} from "@/api/modules/permission";

const emit = defineEmits(["refresh"]);

const dialogVisible = ref(false);
const editDialogVisible = ref(false);
const editFormRef = ref();
const moduleList = ref<any[]>([]);
const editMode = ref<"add" | "edit">("add");
const currentModuleId = ref("");

// 编辑表单
const editForm = reactive({
  FName: "",
  FCode: "",
  FDescription: "",
  FOrderNum: 0
});

// 验证规则
const editRules = {
  FName: [{ required: true, message: "请输入模块名称", trigger: "blur" }],
  FCode: [{ required: true, message: "请输入模块编码", trigger: "blur" }]
};

// 打开弹窗
const open = async () => {
  dialogVisible.value = true;
  await loadModules();
};

// 加载模块列表
const loadModules = async () => {
  const { data } = await getPermissionModules();
  moduleList.value = data;
};

// 新增模块
const handleAdd = () => {
  editMode.value = "add";
  resetEditForm();
  editDialogVisible.value = true;
};

// 编辑模块
const handleEdit = (row: any) => {
  editMode.value = "edit";
  currentModuleId.value = row.FId;
  Object.assign(editForm, row);
  editDialogVisible.value = true;
};

// 删除模块
const handleDelete = async (id: string) => {
  try {
    await ElMessageBox.confirm("确定删除该模块吗? 该模块下的权限将变为未分类状态", "提示", {
      type: "warning"
    });
    await deletePermissionModule(id);
    ElMessage.success("删除成功");
    loadModules();
    emit("refresh");
  } catch {
    // 用户取消
  }
};

// 重置编辑表单
const resetEditForm = () => {
  Object.assign(editForm, {
    FName: "",
    FCode: "",
    FDescription: "",
    FOrderNum: 0
  });
};

// 提交编辑
const submitEdit = async () => {
  try {
    await editFormRef.value.validate();

    if (editMode.value === "add") {
      await createPermissionModule(editForm);
      ElMessage.success("新增成功");
    } else {
      await updatePermissionModule(currentModuleId.value, editForm);
      ElMessage.success("更新成功");
    }

    editDialogVisible.value = false;
    loadModules();
    emit("refresh");
  } catch (error) {
    console.error(error);
  }
};

defineExpose({ open });
</script>

<style scoped>
.module-manager {
  .toolbar {
    margin-bottom: 15px;
  }
}
</style>
